<template>
  <view v-if="visible && internalVisible" class="modal-overlay" @click="closeModal">
    <view class="modal-container" @click.stop>
      <!-- 弹窗头部 -->
      <view class="modal-header">
        <text class="modal-title">🔄 数据同步</text>
        <button class="close-btn" @click="closeModal">
          <text class="close-icon">✕</text>
        </button>
      </view>
      
      <!-- 弹窗内容 -->
      <view class="modal-content">
        <!-- 服务器状态 -->
        <view class="status-section">
          <view class="status-item">
            <text class="status-label">服务器状态:</text>
            <view :class="['status-indicator', serverStatus]"></view>
            <text class="status-text">{{ serverStatusText }}</text>
          </view>
        </view>
        
        <!-- 数据检查区域 -->
        <view class="check-section">
          <button 
            class="check-btn" 
            @click="checkDataSync" 
            :disabled="isChecking || !isServerOnline"
          >
            <text class="btn-icon">🔍</text>
            <text class="btn-text">{{ isChecking ? '检查中...' : '检查数据差异' }}</text>
          </button>
        </view>
        
        <!-- 数据差异显示 -->
        <view v-if="syncResult" class="sync-result-section">
          <view class="result-header">
            <text class="result-title">数据差异分析</text>
            <text class="result-time">{{ syncResult.checkTime }}</text>
          </view>
          
          <view class="differences-list">
            <view 
              v-for="(diff, index) in syncResult.differences" 
              :key="index"
              class="difference-item"
            >
              <view class="diff-header">
                <text class="diff-type">{{ diff.type }}</text>
                <text class="diff-status" :class="diff.status">{{ diff.statusText }}</text>
              </view>
              <text class="diff-description">{{ diff.description }}</text>
              <view v-if="diff.details" class="diff-details">
                <text class="details-text">{{ diff.details }}</text>
              </view>
            </view>
          </view>
          
          <!-- 同步操作按钮 -->
          <view v-if="syncResult.differences.length > 0" class="sync-actions">
            <button 
              class="sync-btn upload-btn" 
              @click="uploadToServer"
              :disabled="isSyncing"
            >
              <text class="btn-icon">⬆️</text>
              <text class="btn-text">上传到服务器</text>
            </button>
            
            <button 
              class="sync-btn download-btn" 
              @click="downloadFromServer"
              :disabled="isSyncing"
            >
              <text class="btn-icon">⬇️</text>
              <text class="btn-text">同步服务器数据</text>
            </button>
          </view>
          
          <!-- 无差异提示 -->
          <view v-else class="no-differences">
            <text class="no-diff-icon">✅</text>
            <text class="no-diff-text">本地数据与服务器数据完全一致</text>
          </view>
        </view>
        
        <!-- 同步进度 -->
        <view v-if="isSyncing" class="sync-progress">
          <view class="progress-bar">
            <view class="progress-fill" :style="{ width: syncProgress + '%' }"></view>
          </view>
          <text class="progress-text">{{ syncProgressText }}</text>
        </view>
        
        <!-- 同步历史 -->
        <view v-if="syncHistory.length > 0" class="sync-history">
          <text class="history-title">同步历史</text>
          <view class="history-list">
            <view 
              v-for="(record, index) in syncHistory.slice(0, 5)" 
              :key="index"
              class="history-item"
            >
              <text class="history-time">{{ record.time }}</text>
              <text class="history-action">{{ record.action }}</text>
              <text class="history-status" :class="record.status">{{ record.statusText }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  
  <!-- 密码输入弹窗 -->
  <view v-if="showPasswordModal" class="password-modal-overlay" @click="cancelPassword">
    <view class="password-modal-container" @click.stop>
      <view class="password-modal-header">
        <text class="password-modal-title">🔐 设置密码</text>
        <button class="password-close-btn" @click="cancelPassword">
          <text class="password-close-icon">✕</text>
        </button>
      </view>
      
      <view class="password-modal-content">
        <view class="password-description">
          <text class="password-desc-text">首次同步数据需要设置一个密码来保护您的账户</text>
        </view>
        
        <view class="password-input-section">
          <view class="password-input-wrapper">
            <input 
              v-model="passwordInput"
              :type="showPassword ? 'text' : 'password'"
              class="password-input"
              placeholder="请输入密码（至少8位）"
              maxlength="50"
            />
            <button 
              class="password-toggle-btn"
              @click="togglePasswordVisibility"
            >
              <text class="toggle-icon">{{ showPassword ? '👁️' : '👁️‍🗨️' }}</text>
            </button>
          </view>
          <view v-if="passwordError" class="password-error">
            <text class="error-text">{{ passwordError }}</text>
          </view>
        </view>
        
        <view class="password-actions">
          <button class="password-btn cancel-btn" @click="cancelPassword">
            <text class="btn-text">取消</text>
          </button>
          <button class="password-btn confirm-btn" @click="confirmPassword">
            <text class="btn-text">确定</text>
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import apiService from '../../../utils/api-service.js'
import appStateManager from '../../../utils/app-state-manager.js'

export default {
  name: 'DataSyncModal',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  emits: ['close', 'user-data-updated'],
  data() {
    return {
      isServerOnline: false,
      serverStatus: 'offline',
      serverStatusText: '服务器离线',
      internalVisible: true, // 内部控制模态框显示状态
      isChecking: false,
      isSyncing: false,
      syncProgress: 0,
      syncProgressText: '',
      syncResult: null,
      // 密码输入弹窗相关状态
      showPasswordModal: false,
      passwordInput: '',
      passwordError: '',
      passwordResolve: null,
      showPassword: false, // 控制密码显示/隐藏
      syncHistory: []
    }
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        this.initSyncModal()
      }
    }
  },
  methods: {
    initSyncModal() {
      this.updateServerStatus()
      this.loadSyncHistory()
    },
    
    updateServerStatus() {
      const status = appStateManager.getState('server')
      this.isServerOnline = status.isOnline
      this.serverStatus = this.isServerOnline ? 'online' : 'offline'
      this.serverStatusText = this.isServerOnline ? '服务器在线' : '服务器离线'
    },
    
    closeModal() {
      this.$emit('close')
    },
    
    async checkDataSync() {
      if (this.isChecking || !this.isServerOnline) return
      
      this.isChecking = true
      this.syncResult = null
      
      try {
        // 模拟数据检查过程
        await this.simulateDataCheck()
        
        // 获取本地数据
        const localData = this.getLocalData()
        
        // 获取服务器数据
        const serverData = await this.getServerData()
        
        // 比较数据差异
        const differences = this.compareData(localData, serverData)
        
        this.syncResult = {
          checkTime: new Date().toLocaleString(),
          differences: differences
        }
        
        uni.showToast({
          title: '数据检查完成',
          icon: 'success',
          duration: 2000
        })
        
      } catch (error) {
        console.error('数据检查失败:', error)
        uni.showToast({
          title: '数据检查失败',
          icon: 'error',
          duration: 2000
        })
      } finally {
        this.isChecking = false
      }
    },
    
    async simulateDataCheck() {
      // 模拟检查过程
      return new Promise(resolve => {
        setTimeout(resolve, 1500)
      })
    },
    
    getLocalData() {
      // 获取本地存储的用户数据
      const localData = {
        users: JSON.parse(uni.getStorageSync('users') || '[]'),
        userInfo: uni.getStorageSync('currentUser'),
        settings: uni.getStorageSync('user_settings'),
        lastSync: uni.getStorageSync('last_sync_time')
      }
      return localData
    },
    
    async getServerData() {
      try {
        // 获取当前登录用户的信息
        const currentUser = uni.getStorageSync('currentUser')
        if (!currentUser) {
          return {
            users: [],
            userInfo: null,
            settings: null,
            lastSync: null
          }
        }
        
        const userData = JSON.parse(currentUser)
        
        // 通过邮箱搜索用户信息
        console.log('正在搜索用户信息:', userData.email)
        const searchResult = await apiService.searchUsers(userData.email)
        console.log('服务器返回的搜索结果:', searchResult)
        
        // 从搜索结果中找到匹配的用户
        const serverUser = searchResult.data ? searchResult.data.find(user => user.email === userData.email) : null
        
        return {
          users: serverUser ? [serverUser] : [],
          userInfo: serverUser,
          settings: null, // 暂时不处理设置数据
          lastSync: new Date().toISOString()
        }
      } catch (error) {
        console.log('获取服务器数据失败，使用空数据:', error)
        return {
          users: [],
          userInfo: null,
          settings: null,
          lastSync: null
        }
      }
    },
    
    compareData(localData, serverData) {
      const differences = []
      
      // 检查用户信息详情
      if (localData.userInfo && serverData.userInfo) {
        const localUser = JSON.parse(localData.userInfo)
        const serverUser = serverData.userInfo
        
        // 比较用户基本信息
        const userFields = ['name', 'email', 'role', 'created_at']
        const fieldNames = {
          'name': '用户名',
          'email': '邮箱',
          'role': '角色',
          'created_at': '创建时间'
        }
        
        userFields.forEach(field => {
          if (localUser[field] !== serverUser[field]) {
            differences.push({
              type: '用户信息',
              status: 'different',
              statusText: '不一致',
              description: `${fieldNames[field]}不匹配`,
              details: `本地: ${localUser[field] || '无'} | 服务器: ${serverUser[field] || '无'}`,
              field: field,
              localValue: localUser[field],
              serverValue: serverUser[field]
            })
          }
        })
        
        // 检查头像信息
        if (localUser.avatar !== serverUser.avatar) {
          differences.push({
            type: '用户头像',
            status: 'different',
            statusText: '不一致',
            description: '头像信息不匹配',
            details: `本地: ${localUser.avatar ? '已设置' : '未设置'} | 服务器: ${serverUser.avatar ? '已设置' : '未设置'}`,
            field: 'avatar',
            localValue: localUser.avatar,
            serverValue: serverUser.avatar
          })
        }
      } else if (localData.userInfo && !serverData.userInfo) {
        const localUser = JSON.parse(localData.userInfo)
        differences.push({
          type: '用户信息',
          status: 'local-only',
          statusText: '仅本地',
          description: `用户 ${localUser.name} 仅存在于本地`,
          details: `邮箱: ${localUser.email} | 角色: ${localUser.role || 'user'}`,
          localValue: localUser,
          serverValue: null
        })
      } else if (!localData.userInfo && serverData.userInfo) {
        differences.push({
          type: '用户信息',
          status: 'server-only',
          statusText: '仅服务器',
          description: `用户 ${serverData.userInfo.name} 仅存在于服务器`,
          details: `邮箱: ${serverData.userInfo.email} | 角色: ${serverData.userInfo.role || 'user'}`,
          localValue: null,
          serverValue: serverData.userInfo
        })
      } else if (!localData.userInfo && !serverData.userInfo) {
        differences.push({
          type: '用户信息',
          status: 'none',
          statusText: '无数据',
          description: '本地和服务器都没有用户信息',
          details: '请先登录或注册用户',
          localValue: null,
          serverValue: null
        })
      }
      
      // 暂时不检查设置数据，专注于用户基本信息
      
      return differences
    },
    
    async uploadToServer() {
      if (this.isSyncing) return
      
      this.isSyncing = true
      this.syncProgress = 0
      this.syncProgressText = '准备上传...'
      
      try {
        // 获取本地用户数据
        const localData = await this.getLocalData()
        
        this.syncProgress = 33
        this.syncProgressText = '准备用户数据...'
        
        if (!localData.userInfo) {
          throw new Error('未找到本地用户数据')
        }
        
        this.syncProgress = 66
        this.syncProgressText = '上传用户信息...'
        
        // 提示用户输入密码
        const password = await this.promptForPassword()
        if (!password) {
          throw new Error('用户取消了密码输入')
        }
        
        // 调用API服务上传数据
        const result = await apiService.syncDataToServer(localData, password)
        
        if (result.success) {
          // 更新本地用户数据，保存服务器ID
          if (result.user) {
            const updatedUser = {
              ...localData.userInfo,
              id: result.user.id,           // 服务器主键ID
              offline_id: result.user.offline_id,
              name: result.user.name,
              email: result.user.email
            }
            
            // 保存更新后的用户信息
            uni.setStorageSync('currentUser', JSON.stringify(updatedUser))
            
            // 通知父组件用户数据已更新
            this.$emit('user-data-updated', updatedUser)
            
            console.log('用户数据已更新:', updatedUser)
          }          // 记录同步历史
          this.addSyncHistory('上传到服务器', 'success', '上传成功')
          
          uni.showToast({
            title: '数据上传成功，正在同步服务器数据...',
            icon: 'success',
            duration: 2000
          })
          
          // 上传成功后自动同步服务器数据
          setTimeout(async () => {
            try {
              console.log('开始自动同步服务器数据...')
              await this.downloadFromServer()
            } catch (error) {
              console.error('自动同步服务器数据失败:', error)
              // 即使自动同步失败，也重新检查数据差异
              this.checkDataSync()
            }
          }, 1500)
        } else {
          throw new Error(result.message || '上传失败')
        }
        
      } catch (error) {
        console.error('上传失败:', error)
        this.addSyncHistory('上传到服务器', 'error', '上传失败')
        uni.showToast({
          title: '数据上传失败',
          icon: 'error',
          duration: 2000
        })
      } finally {
        this.isSyncing = false
        this.syncProgress = 0
        this.syncProgressText = ''
      }
    },
    
    async downloadFromServer() {
      if (this.isSyncing) return
      
      this.isSyncing = true
      this.syncProgress = 0
      this.syncProgressText = '准备下载...'
      
      try {
        // 获取当前用户信息
        const currentUser = uni.getStorageSync('currentUser')
        if (!currentUser) {
          throw new Error('未找到当前用户信息')
        }
        
        const userData = JSON.parse(currentUser)
        
        this.syncProgress = 33
        this.syncProgressText = '连接服务器...'
        
        // 从服务器获取用户数据
        const serverData = await this.getServerData()
        
        this.syncProgress = 66
        this.syncProgressText = '下载用户信息...'
        
        if (serverData.userInfo) {
          // 更新本地用户数据
          const updatedUser = {
            ...userData,
            ...serverData.userInfo,
            // 保留本地的token信息
            token: userData.token
          }
          
          // 保存更新后的用户信息
          uni.setStorageSync('currentUser', JSON.stringify(updatedUser))
          
          // 同时更新用户列表中的信息
          const users = uni.getStorageSync('users')
          if (users) {
            const userList = JSON.parse(users)
            const userIndex = userList.findIndex(u => u.email === userData.email)
            if (userIndex !== -1) {
              userList[userIndex] = {
                ...userList[userIndex],
                ...serverData.userInfo
              }
              uni.setStorageSync('users', JSON.stringify(userList))
            }
          }
          
          console.log('用户数据已更新:', updatedUser)
          
          // 通知父组件用户数据已更新
          this.$emit('user-data-updated', updatedUser)
        }
        
        this.syncProgress = 100
        this.syncProgressText = '下载完成'
        
        // 记录同步历史
        this.addSyncHistory('从服务器下载', 'success', '下载成功')
        
        uni.showToast({
          title: '数据下载成功',
          icon: 'success',
          duration: 2000
        })
        
        // 重新检查数据
        setTimeout(() => {
          this.checkDataSync()
        }, 1000)
        
      } catch (error) {
        console.error('下载失败:', error)
        this.addSyncHistory('从服务器下载', 'error', '下载失败')
        uni.showToast({
          title: '数据下载失败',
          icon: 'error',
          duration: 2000
        })
      } finally {
        this.isSyncing = false
        this.syncProgress = 0
        this.syncProgressText = ''
      }
    },
    
    async simulateUpload() {
      const steps = [
        { progress: 33, text: '准备用户数据...' },
        { progress: 66, text: '上传用户信息...' },
        { progress: 100, text: '上传完成' }
      ]
      
      for (const step of steps) {
        this.syncProgress = step.progress
        this.syncProgressText = step.text
        await new Promise(resolve => setTimeout(resolve, 500))
      }
    },
    
    async simulateDownload() {
      const steps = [
        { progress: 33, text: '连接服务器...' },
        { progress: 66, text: '下载用户信息...' },
        { progress: 100, text: '下载完成' }
      ]
      
      for (const step of steps) {
        this.syncProgress = step.progress
        this.syncProgressText = step.text
        await new Promise(resolve => setTimeout(resolve, 500))
      }
    },
    
    addSyncHistory(action, status, statusText) {
      const record = {
        time: new Date().toLocaleString(),
        action: action,
        status: status,
        statusText: statusText
      }
      
      this.syncHistory.unshift(record)
      
      // 保存到本地存储
      uni.setStorageSync('sync_history', JSON.stringify(this.syncHistory))
      
      // 限制历史记录数量
      if (this.syncHistory.length > 20) {
        this.syncHistory = this.syncHistory.slice(0, 20)
      }
    },

    // 提示用户输入密码
    promptForPassword() {
      return new Promise((resolve) => {
        this.showPasswordModal = true
        this.passwordInput = ''
        this.passwordError = ''
        
        // 设置回调函数
        this.passwordResolve = resolve
      })
    },
    
    // 确认密码输入
    confirmPassword() {
      if (!this.passwordInput || this.passwordInput.length < 8) {
        this.passwordError = '密码长度至少8位'
        return
      }
      
      this.passwordError = ''
      this.showPasswordModal = false
      this.passwordResolve(this.passwordInput)
    },
    
    // 取消密码输入
    cancelPassword() {
      this.showPasswordModal = false
      this.passwordInput = ''
      this.passwordError = ''
      this.showPassword = false
      this.passwordResolve(null)
    },
    
    // 切换密码显示/隐藏
    togglePasswordVisibility() {
      this.showPassword = !this.showPassword
    },
    
    loadSyncHistory() {
      try {
        const history = uni.getStorageSync('sync_history')
        if (history) {
          this.syncHistory = JSON.parse(history)
        }
      } catch (error) {
        console.error('加载同步历史失败:', error)
        this.syncHistory = []
      }
    }
  }
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(5rpx);
}

.modal-container {
  width: 90%;
  max-width: 800rpx;
  max-height: 80%;
  background: rgba(30, 41, 59, 0.95);
  border-radius: 20rpx;
  border: 1rpx solid #374151;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  z-index: 10000;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 32rpx;
  border-bottom: 1rpx solid #374151;
  background: rgba(55, 65, 81, 0.8);
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #fcd34d;
}

.close-btn {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.8);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.close-btn:active {
  background: rgba(239, 68, 68, 1);
  transform: scale(0.95);
}

.close-icon {
  font-size: 24rpx;
  color: white;
  font-weight: bold;
}

.modal-content {
  flex: 1;
  overflow-y: auto;
  padding: 24rpx;
}

/* 状态区域 */
.status-section {
  margin-bottom: 24rpx;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 16rpx;
  background: rgba(55, 65, 81, 0.5);
  border-radius: 12rpx;
}

.status-label {
  font-size: 24rpx;
  color: #d1d5db;
}

.status-indicator {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
}

.status-indicator.online {
  background-color: #4CAF50;
}

.status-indicator.offline {
  background-color: #f44336;
}

.status-text {
  font-size: 24rpx;
  color: #d1d5db;
}

/* 检查区域 */
.check-section {
  margin-bottom: 24rpx;
}

.check-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  padding: 16rpx;
  background: rgba(102, 126, 234, 0.8);
  border: none;
  border-radius: 12rpx;
  color: white;
  font-size: 24rpx;
  transition: all 0.3s ease;
}

.check-btn:disabled {
  background: rgba(107, 114, 128, 0.5);
  color: #9ca3af;
}

.check-btn:active:not(:disabled) {
  background: rgba(102, 126, 234, 1);
  transform: scale(0.98);
}

/* 同步结果区域 */
.sync-result-section {
  margin-bottom: 24rpx;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.result-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #fcd34d;
}

.result-time {
  font-size: 20rpx;
  color: #9ca3af;
}

.differences-list {
  margin-bottom: 20rpx;
}

.difference-item {
  background: rgba(55, 65, 81, 0.5);
  border-radius: 12rpx;
  padding: 16rpx;
  margin-bottom: 12rpx;
}

.diff-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

.diff-type {
  font-size: 24rpx;
  font-weight: bold;
  color: #d1d5db;
}

.diff-status {
  font-size: 20rpx;
  padding: 4rpx 8rpx;
  border-radius: 6rpx;
}

.diff-status.different {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}

.diff-status.local-only {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.diff-status.server-only {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

.diff-description {
  font-size: 22rpx;
  color: #9ca3af;
  margin-bottom: 8rpx;
}

.diff-details {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6rpx;
  padding: 8rpx;
}

.details-text {
  font-size: 20rpx;
  color: #6b7280;
}

/* 同步操作按钮 */
.sync-actions {
  display: flex;
  gap: 12rpx;
  margin-top: 16rpx;
}

.sync-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  padding: 12rpx;
  border: none;
  border-radius: 8rpx;
  font-size: 22rpx;
  transition: all 0.3s ease;
}

.upload-btn {
  background: rgba(34, 197, 94, 0.8);
  color: white;
}

.download-btn {
  background: rgba(59, 130, 246, 0.8);
  color: white;
}

.sync-btn:disabled {
  background: rgba(107, 114, 128, 0.5);
  color: #9ca3af;
}

.sync-btn:active:not(:disabled) {
  transform: scale(0.98);
}

/* 无差异提示 */
.no-differences {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32rpx;
  background: rgba(34, 197, 94, 0.1);
  border-radius: 12rpx;
  border: 1rpx solid rgba(34, 197, 94, 0.3);
}

.no-diff-icon {
  font-size: 48rpx;
  margin-bottom: 12rpx;
}

.no-diff-text {
  font-size: 24rpx;
  color: #22c55e;
  text-align: center;
}

/* 同步进度 */
.sync-progress {
  margin-bottom: 24rpx;
}

.progress-bar {
  width: 100%;
  height: 8rpx;
  background: rgba(55, 65, 81, 0.5);
  border-radius: 4rpx;
  overflow: hidden;
  margin-bottom: 8rpx;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 4rpx;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 20rpx;
  color: #9ca3af;
  text-align: center;
}

/* 同步历史 */
.sync-history {
  border-top: 1rpx solid #374151;
  padding-top: 20rpx;
}

.history-title {
  font-size: 24rpx;
  font-weight: bold;
  color: #d1d5db;
  margin-bottom: 12rpx;
}

.history-list {
  max-height: 200rpx;
  overflow-y: auto;
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8rpx 0;
  border-bottom: 1rpx solid rgba(55, 65, 81, 0.3);
}

.history-time {
  font-size: 20rpx;
  color: #9ca3af;
  flex: 1;
}

.history-action {
  font-size: 20rpx;
  color: #d1d5db;
  flex: 1;
  text-align: center;
}

.history-status {
  font-size: 20rpx;
  flex: 1;
  text-align: right;
}

.history-status.success {
  color: #22c55e;
}

.history-status.error {
  color: #ef4444;
}

/* 密码输入弹窗样式 */
.password-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  backdrop-filter: blur(5rpx);
}

.password-modal-container {
  width: 80%;
  max-width: 600rpx;
  background: rgba(30, 41, 59, 0.95);
  border-radius: 20rpx;
  border: 1rpx solid #374151;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  z-index: 10002;
}

.password-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 40rpx;
  border-bottom: 1rpx solid #374151;
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

.password-modal-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #f8fafc;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.password-close-btn {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.1);
  border: 1rpx solid rgba(239, 68, 68, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.password-close-btn:active {
  background: rgba(239, 68, 68, 0.2);
  transform: scale(0.95);
}

.password-close-icon {
  font-size: 24rpx;
  color: #ef4444;
  font-weight: bold;
}

.password-modal-content {
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.password-description {
  text-align: center;
}

.password-desc-text {
  font-size: 28rpx;
  color: #cbd5e1;
  line-height: 1.5;
}

.password-input-section {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-input {
  width: 100%;
  height: 80rpx;
  padding: 0 80rpx 0 24rpx;
  background: rgba(51, 65, 85, 0.5);
  border: 2rpx solid #475569;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #f8fafc;
  transition: all 0.3s ease;
}

.password-input:focus {
  border-color: #3b82f6;
  background: rgba(51, 65, 85, 0.7);
  outline: none;
}

.password-input::placeholder {
  color: #94a3b8;
}

.password-toggle-btn {
  position: absolute;
  right: 12rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 56rpx;
  height: 56rpx;
  border-radius: 8rpx;
  background: rgba(71, 85, 105, 0.3);
  border: 1rpx solid #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.password-toggle-btn:active {
  background: rgba(71, 85, 105, 0.5);
  transform: translateY(-50%) scale(0.95);
}

.toggle-icon {
  font-size: 24rpx;
  color: #cbd5e1;
  transition: all 0.3s ease;
}

.password-error {
  padding: 12rpx 16rpx;
  background: rgba(239, 68, 68, 0.1);
  border: 1rpx solid rgba(239, 68, 68, 0.3);
  border-radius: 8rpx;
}

.error-text {
  font-size: 24rpx;
  color: #ef4444;
}

.password-actions {
  display: flex;
  gap: 20rpx;
  margin-top: 20rpx;
}

.password-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 12rpx;
  border: none;
  font-size: 28rpx;
  font-weight: 600;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cancel-btn {
  background: rgba(71, 85, 105, 0.5);
  border: 2rpx solid #475569;
}

.cancel-btn:active {
  background: rgba(71, 85, 105, 0.7);
  transform: scale(0.98);
}

.confirm-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border: 2rpx solid #3b82f6;
  box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.3);
}

.confirm-btn:active {
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
  transform: scale(0.98);
}

.password-btn .btn-text {
  color: #f8fafc;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
}
</style>
